<template>

	<div class="pageContent" :class="{'pageContentGre' : tabIndex==2 && token}">
		<view class="tabList">
			<view class="tabItem" :class="{'tabSelect' : tabIndex==index}" @click="toDetail(index)"
				v-for="(item,index) in userList" :key="index">
				{{item.name}}
			</view>
		</view>
		<view class="loginM" v-if="!token">
			<image class="loginMIco" :src="images +'/loginMIco.png'" />
			<button class="btOne loginMBt" @click="loginRed">请先验证身份登录</button>
		</view>

		<canvas class="imageTest" canvas-id="canvas" v-show="tabIndex==0 && !isQrExpire && token && !isVoice"
			@click="qrCodeTempNew"></canvas>
		<template v-if="token">
			<view class="imageTest" v-if="tabIndex==0 && isQrExpire && !isVoice" @click="qrCodeTempNew">
				<image class="imageTestBack" :src="images +'/codeDefault.png'" />
				<view class="imageTestLod"></view>
				<image class="centerAbs imageTestIc" :src="images +'/refreshIcon.png'" />
				<view class="centerAbs imageTestRe">点击刷新</view>
				<view class="centerAbs imageTestNo">原通行码已失效</view>
			</view>
			<view class="code" v-if="tabIndex==0">
				<view class="codeMain">
					<template v-if="isVoice">
						<view class="codeSecret">语音密码</view>
						<view class="codeSecList">
							<view class="codeSecItem" v-for="(item,index) in 4" :key="index">
								<image class="codeSecImg" :src="images +'/codeSecImg.png'" />
								<view>{{audioTextCode[index] || '-'}}</view>
							</view>
						</view>
						<view class="codeRefMa">3分钟后自动失效<text class="codeRef" @click="qrCodeTempNew">手动刷新</text></view>
						<view class="codeSecTip">请在门禁终端设备上说：<text class="codeSecTex">{{'“'+audioTextCode+'”'}}</text>
						</view>
						<view class="codeSecCha" @click="codeSecChange">
							<image class="codeSecChaImg" :src="images +'/codeChange.png'" />切换二维码
						</view>
					</template>
					<template v-if="!isVoice">
						<view class="codeTime">开门密码：{{codeText || '暂无'}}</view>
						<view class="imageTestMa"></view>
						<!-- <canvas class="imageTest" canvas-id="canvas"></canvas> -->
						<view class="codeRefMa">3分钟后自动失效<text class="codeRef" @click="qrCodeTempNew">手动刷新</text> </view>
						<view class="codeTip">二维码对准扫码处 间距在0.8米内</view>
						<view class="codeSecCha" v-if="audioTextCode" @click="codeSecChange">
							<image class="codeSecChaImg" :src="images +'/codeChange.png'" />切换语音密码
						</view>
					</template>
				</view>
				<view class="codeMes">
					<image class="codeMesIc" :src="localImages +'/messageIcon.png'" />
					<swiper class="codeMesNo" autoplay='true' interval="4000">
						<swiper-item v-for="(item,index) in noList" :key="index">
							{{item.title || item.content || '物业消息图文标题'}}
						</swiper-item>
					</swiper>
				</view>
				<view class="codeMesAd">
					<swiper class="codeMesSw" indicator-dots="1" autoplay='true' interval="4000"
						indicator-active-color="#1086FF">
						<swiper-item v-for="(item,index) in adList" :key="index">
							<image v-if="item.pictureUrl" class="codeMesSwIm" :src="item.pictureUrl ||adListPicUrl"
								mode="widthFix" @click="showPhoto(item.pictureUrl)" />
							<block v-if="item.mediaUrl">
								<image v-if="item.mediaUrl" class="codeMesSwIm" :src="item.thumbnailUrl ||adListPicUrl"
									mode="widthFix" @click="goMedia(item.mediaUrl)" />
							</block>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<view class="come" v-if="tabIndex==1">
				<view class="comeCon">
					<view class="comeReg"><text class="memberItSt">*</text>来访目的</view>
					<view class="comeTyList" v-if="1">
						<view class="comeType" @click="comeListCli(index)" v-for="(item,index) in comeList"
							:key="index">
							<image class="comeTypeIcon" :src="item.comeUrl" />
							<view class="comeTypeMsg" :class="{'comeTypeSel' : comeIndex==index}">
								{{item.visitPurposeName || '亲朋好友'}}
							</view>
						</view>
					</view>
					<view class="comeTime">
						<text class="memberItSt">*</text>
						<text class="comeTimeBol">访客姓名</text>
						<view class="comeRight">
							<input class="memberItIn" v-model="visitorName" placeholder="填写访客姓名与身份证上名字一致"
								placeholder-class="inputPlaceHold" />
						</view>
					</view>
					<view class="comeTime">
						<text class="memberItSt">*</text>
						<text class="comeTimeBol">同行人数</text>
						<view class="comeRight">
							<picker class="comePicMain" :value="periodIndex" :range="period" range-key="name"
								@change="choose" id="period" data-name="period">
								<view class="comePicVie">{{period[periodIndex].name}}</view>
								<view class="comePicDel"></view>
							</picker>
						</view>
					</view>
					<view class="comeTime">
						<text class="memberItSt">*</text>
						<text class="comeTimeBol">来访开始日期</text>
						<view class="comeRight">
							<picker class="comePic" mode="date" :value="date" @change="choose" id="date">
								<view class="comePicVie comeDefault" v-if="date=='' ">请选择日期</view>
								<view class="comePicVie" v-else>{{date}}</view>
								<image class="comePicDatIm" :src="localImages +'/date.png'" />
							</picker>
							<picker v-if="0" class="comePic" mode="time" :value="time" @change="choose" id="time">
								<view class="comePicVie comeDefault" v-if="time=='' ">请选择时间</view>
								<view class="comePicVie" v-else>{{time}}</view>
								<image class="comePicDatIm" :src="localImages +'/date.png'"></image>
							</picker>
						</view>
					</view>
					<view class="comeTime">
						<text class="memberItSt">*</text>
						<text class="comeTimeBol">来访结束日期</text>
						<view class="comeRight">
							<picker class="comePic" mode="date" :value="visitEndDate" @change="choose"
								id="visitEndDate">
								<view class="comePicVie comeDefault" v-if="visitEndDate=='' ">请选择日期</view>
								<view class="comePicVie" v-else>{{visitEndDate}}</view>
								<image class="comePicDatIm" :src="localImages +'/date.png'" />
							</picker>
						</view>
					</view>
					<view class="comeTime">
						<text class="memberItSt">*</text>
						<text class="comeTimeBol">通行次数</text>
						<view class="comeRight">
							<picker class="comePicMain" :value="comeTimeIndex" :range="comeTime" range-key="name"
								@change="choose" id="comeTime">
								<view class="comePicVie">{{comeTime[comeTimeIndex].name}}</view>
								<view class="comePicDel"></view>
							</picker>
						</view>
					</view>
					<view class="comeTime" id="comeTimeBol">
						<text class="memberItSt empty">*</text>
						<text class="comeTimeBol">车牌号码</text>

						<view class="search-car-input" @click="carInputClick">
							<view class="car-input">
								<view class="energy" v-show="plateNum.length>7">
									新能源
								</view>
								<view class="car-input-text" :class="{ 'active': plateNum }">
									{{plateNum || '填写车牌号方便车辆通行'}}
								</view>
								<view class="cursor" v-show="isCursor">
								</view>
							</view>
						</view>
					</view>

					<!-- 引用车牌组件 -->
					<plateNumber ref="plate" v-model="plateNum" @showOrHide="showOrHide"></plateNumber>
					<button class="btOne" :class="comeIndex==-1 ? 'btDefalt' : ''" @click="commitTamp">生成通行码</button>
				</view>
				<view class="comeMes">
					<image class="codeMesIc" :src="localImages +'/messageIcon.png'" />
					使用说明:生成通行码后将保存在手机相册发送给您的访客即可通行使用.
				</view>
			</view>

			<view v-if="tabIndex==2">
				<view class="remote" v-if="doorList.length && isComplete">
					<view class="remoteMain" @click="doorListCli(index)" v-for="(item,index) in doorList" :key="index">
						<image class="remoteBac" v-show="doorIndex==index" :src="images +'/selectGate.png'" />
						<image class="remoteIco" :src="localImages +'/damen.png'" />
						<view class="remoteGate">{{item.gatePostName || '悦江苑 东门'}}</view>
						<!-- <view class="remoteName">{{item.equipmentName || '设备名称'}}</view> -->
						<image class="remoteSel" v-if="doorIndex==index" :src="localImages +'/doorSelect.png'" />
					</view>
					<!-- <view class="roomMov" v-if="1" @touchstart="buttonStart"> -->
					<view class="roomMov" v-if="1" @click="openDoor()">
						<image class="roomMovTe" :src="images +'/roomMovIc.png'" />
						<view class="roomMovMsg">开门</view>
					</view>
				</view>
				<view class="appEmp" v-if="!doorList.length && isComplete">
					<image class="appEmpIcon" :src="images +'/appEmpty.png'" mode="widthFix"></image>
					<view class="appEmpMsg">～当前门禁设备已离线～</view>
				</view>
			</view>

			<view v-if="tabIndex==3">
				<view class="perTypeMain">
					<view class="perType" :class="index==perIndex ? 'select' : ''" v-for="(item,index) in perList"
						:key="index" @click="selectPer(index)">
						{{item.name}}
					</view>
				</view>

				<view class="remote remotePerType" v-if="doorListOffline.length && isComplete">
					<view class="remoteMain" v-for="(item,index) in doorListOffline" :key="index">
						<image class="remoteBac" v-show="doorIndex==index" :src="images +'/selectGate.png'" />
						<image class="remoteIco" :src="localImages +'/damen.png'" />
						<view class="remoteGate">{{item.gatePostName || '悦江苑 东门'}}</view>
						<!-- <view class="remoteName">{{item.equipmentName || '设备名称'}}</view> -->
						<image class="remoteSel" v-if="doorIndex==index" :src="localImages +'/doorSelect.png'" />
					</view>
					<!-- <view class="roomMov" v-if="1" @touchstart="buttonStart"> -->
					<view class="roomMov" v-if="0" @click="openDoor()">
						<image class="roomMovTe" :src="images +'/roomMovIc.png'" />
						<view class="roomMovMsg">开门</view>
					</view>
				</view>
				<view class="appEmp" v-if="!doorListOffline.length && isComplete">
					<image class="appEmpIcon" :src="images +'/appEmpty.png'" mode="widthFix"></image>
					<view class="appEmpMsg">～当前选择的门禁设备列表为空～</view>
				</view>
			</view>

		</template>

	</div>

</template>

<script>
	import config from '../../static/config.js'
	import util from '../../static/utils/util.js'
	import drawQrcode from '../../static/utils/weapp.qrcode.esm.js'
	import plateNumber from '../../components/plateNumber/plateNumber.vue'
	export default {
		components: {
			plateNumber
		},

		data() {
			return {
				TRTCCallingComponent: null,
				modalVisible: false,
				conversation: {},
				isShowChatContainer: true,
				images: config.images,
				localImages: config.localImages,
				mountedCount: 0,
				userList: [{
					name: '通行码'
				}, {
					name: '访客'
				}, {
					name: '远程开门'
				}],
				tabIndex: 0, //顶部导航栏索引
				// doorList: [{name:'悦江苑 东门'},{name:'悦江苑 南门'},{name:'悦江苑 北门'}],
				doorList: [],
				doorIndex: -1,
				comeList: [{
						name: '通行码'
					}, {
						name: '上门服务'
					}, {
						name: '装修'
					}, {
						name: '求职面试'
					},
					{
						name: '求职面试'
					}, {
						name: '搬家搬运'
					}, {
						name: '中介看房'
					}, {
						name: '更多'
					},
				],
				comeIndex: -1,
				formData: {
					personCount: '',
					date: '',
					visitEndDate: '',
					time: '',
				},
				date: '',
				visitEndDate: '',
				time: '',
				codeText: '------',
				qrCodeTempTe: '888888',
				audioTextCode: '',
				// qrCodeTempTe:'MLk1UTrsS0Y=',
				token: false,
				isComplete: false,
				room: '',
				adList: [{
						pictureUrl: 'https://www.anbotcloud.cn/minIO/picture/owner/2021-04-28/1619616094460.jpg'
					},
					{
						pictureUrl: 'https://www.anbotcloud.cn/minIO/picture/owner/2021-04-28/1619616107096.jpg'
					},
				],
				adListPicUrl: 'https://www.anbotcloud.cn/minIO/picture/owner/2021-04-28/1619616094460.jpg',
				noList: [{
					content: '关于2021年部分节假日安排的通知'
				}, {
					content: '关于2021年部分物业的通知'
				}],
				period: [{
					id: 0,
					name: '0'
				}, {
					id: 1,
					name: '1'
				}, {
					id: 2,
					name: '2'
				}, {
					id: 3,
					name: '3'
				}, {
					id: 4,
					name: '3人以上'
				}, ],
				periodIndex: 0, //同行人数
				comeTime: [{
					id: 1,
					name: '1次'
				}, {
					id: 0,
					name: '不限'
				}, ],
				comeTimeIndex: 0, //通行次数
				visitorName: '',
				timer: '',
				isHide: false,
				isAppHide: false,
				isRecording: false,
				plateNum: '', //输入的车牌号
				isCursor: false, //是否显示焦点
				isQrExpire: false, //二维码是否过期
				intervalCount: 0,
				isDev: 0,
				doorListOffline: [],
				perList: [{
						value: 0,
						name: '离线设备',
					},
					{
						value: 1,
						name: '在线设备',
					},
				],
				perIndex: 0,
				isVoice: false, //是否显示语音密码
			}
		},

		onLoad() {
			console.log('========index-onLoad==========')
			//0.4秒后开始加载页面
			setTimeout(() => {
				this.isComplete = true
			}, 300)
			var token = wx.getStorageSync('token')
			if (token) {
				this.showQrcode()
				var room = wx.getStorageSync('room');
				this.room = room;
				this.qrCodeTemp()
				this.noticeList()
				this.purposeAll()
				this.gateList()
			}

			//开启分享朋友圈
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
		},
		onShow() {
			this.isHide = false;
			if (this.isAppHide) {
				console.warn('小程序最小化=》页面回显')
				this.isAppHide = false
			}

			var token = wx.getStorageSync('token')
			this.token = token
			if (token) {
				//防止
				// var room = wx.getStorageSync('room');
				// this.room = room;
				var tabIndex = this.tabIndex
				if (tabIndex == 0) {
					wx.setKeepScreenOn({
						keepScreenOn: true
					})
					wx.getScreenBrightness({
						success(res) {
							console.warn('getScreenBrightness', res)
							//缓存之前的屏幕亮度
							wx.setStorageSync('screenBri', res.value);
							//调节当前屏幕亮度
							wx.setScreenBrightness({
								value: 0.7
							})
						}
					})
				}

				var isDev = wx.getStorageSync('isDev'); //开发模式
				if (isDev) {
					this.isDev = 1;
					this.userList[3] = {
						name: '门禁列表'
					}
				} else {
					this.isDev = 0;
					this.userList.length = 3
				}

				//默认选择当天
				var dateString = new Date().format('yyyy/MM/dd');
				this.date = dateString;
				this.visitEndDate = dateString;
			} else {
				this.isDev = 0;
				this.userList.length = 3
			}
		},

		onHide() {
			this.isHide = true;
			this.carClose(); //关闭车牌键盘
			this.recoverLight();
			//切换页面前已经执行了11s,停止二维码过期状态定时任务
			if (this.mountedCount > 11) {
				this.stopCode();
			}
		},

		onUnload() {
			console.log('onUnload')
			if (this.token) {
				this.recoverLight();
				//停止二维码过期状态定时任务
				this.stopCode();
			}

		},

		methods: {
			//获取用户头像
			loginRed() {
				util.getUserProfile();
			},

			//修改首页显示或者隐藏TabBar
			updatePageInfo(flag) {
				if (flag) {
					wx.setNavigationBarTitle({
						title: ''
					})
					wx.hideTabBar()
				} else {
					wx.setNavigationBarTitle({
						title: '世纪金源物业'
					})
					wx.showTabBar()
				}
			},

			toDetail(index) {
				this.tabIndex = index
				if (this.token) {
					switch (index) {
						case 0:
							wx.setScreenBrightness({
								value: 0.7
							})
							break;
						case 1:
							this.recoverLight();
							break;
						case 2:
							this.gateList()
							this.recoverLight();
							break;
						case 3:
							var value = this.perList[this.perIndex].value;
							this.getAllGatePostList(value)
							this.recoverLight();
							break;
						default:
							break;
					}
				}
			},

			//===========通行码模块=============
			//业主获取通行二维码和通行密码
			async qrCodeTemp(isRefresh = false) {
				var roomId = this.room.roomId;
				var url = '/UserServer/owner/qrCode/qrCodeTemp'
				var params = {
					roomId: roomId
				}
				var options = {
					url,
					params
				}
				// wx.showLoading({ title: '', mask: true, duration: 1800 }); //接口返回有延时，展示进度条过渡
				//2s-6s切换页面不重复刷新二维码
				var param = await util.requestPro(options);
				this.codeText = param.passwordTemp
				this.qrCodeTempTe = param.qrCodeTemp
				this.audioTextCode = param.audioTextCode || '' //接口没返回默认重置为空
				console.log('isRefresh=', isRefresh, 'this.isQrExpire=', this.isQrExpire)
				if (isRefresh) {
					//过期刷新
					//延时0.5秒，释放二维码过期状态，防止重启websocket，导致此时接受不到消息
					if (this.isQrExpire) {
						setTimeout(() => {
							this.isQrExpire = false;
							this.mountedCount = 1;
						}, 500)
					} else {
						//主动刷新，此时还没有过期。延迟0.5s重置计数时间=1，防止触发重启websocket
						setTimeout(() => {
							this.mountedCount = 1;
						}, 500)
					}
				} else {
					setTimeout(() => {
						this.startCode();
					}, 100)
				}
				this.showQrcode()
			},
			// 显示二维码
			showQrcode() {
				let systemInfo = wx.getSystemInfoSync();
				let unit = systemInfo.windowWidth / 375;
				var text = this.qrCodeTempTe;
				drawQrcode({
					width: 240 * unit,
					height: 240 * unit,
					canvasId: 'canvas',
					text: text,
				})
			},
			// 刷新通行密码
			qrCodeTempNew() {
				var room = this.room;
				if (room) {
					this.qrCodeTemp(true);
				} else {
					wx.showToast({
						title: "当前账号没有绑定房屋信息.",
						icon: 'none'
					});
				}
			},

			//开启二维码过期状态定时任务
			startCode() {
				var pingTime = -1;
				util.interval(() => {
					var ownerQrExpire = wx.getStorageSync('ownerQrExpire');
					// 模拟测试5s二维码过期
					// if(this.mountedCount==5){
					//   this.stopCodeOnly()
					// }

					// 8s自动重连
					if (this.mountedCount % 8 == 0) {
						var nowTime = new Date().getTime()
						// console.log('nowTime-pingTime=', nowTime - pingTime)
						//1是第一次连接,并且此时二维码不过期
						//2或者距离上一次收到ping超过8s => 触发websocket重连
						if ((this.mountedCount == 0 && !this.isQrExpire) || nowTime - pingTime > 8 * 1000) {
							console.log('===util.socketTest')
							util.socketTest((res) => {
								if (res == 'ping') {
									// console.log('ping',res)
									pingTime = new Date().getTime() //上次心跳成功的时间
								} else if (res == 'ownerQrExpire') {
									//websocket发送二维码已经使用的消息
									this.stopCodeOnly()
								}
							});
						}
					}
					// 3分钟自动过期
					if (this.mountedCount > 180) {
						this.stopCodeOnly()
					}
					++this.mountedCount
					//前20s显示计数时间
					if (this.mountedCount < 20 || this.mountedCount > 160 ) {
						console.log('interval执行次数-二维码：', this.mountedCount)
					}
				}, 1000)
			},
			//重置定时任务计数时间，展示过期二维码页面，不重连socket
			stopCodeOnly() {
				this.mountedCount = 1
				this.codeText = '- - - - - -'
				this.isQrExpire = true;
				this.audioTextCode = ''
			},
			//停止二维码过期状态定时任务
			stopCode() {
				this.mountedCount = 0
				this.isQrExpire = false;
				util.clearInterval()
			},
			//停止二维码过期状态定时任务，展示过期二维码页面
			stopCodeShow() {
				this.mountedCount = 0
				this.codeText = '- - - - - -'
				this.isQrExpire = true;
				util.clearInterval()
			},

			//切换显示语音密码
			codeSecChange() {
				this.isVoice = !this.isVoice;
			},

			//获取广告与物业通知
			async noticeList() {
				var projectId = this.room.projectId;
				var url = '/UserServer/advertise/noticeList'
				var params = {
					projectId: projectId
				}
				var options = {
					url,
					params
				}
				var param = await util.requestPro(options);
				var adList = [];
				var noList = [];
				param.map((value, index, array) => {
					// value['pictureUrl']=config.IMAGE_APIHOST+value.pictureUrl
					if (value.type == 1) {
						if (value.pictureUrl) {
							value.pictureUrl = config.IMAGE_APIHOST + value.pictureUrl
						}
						if (value.thumbnailUrl) {
							value.thumbnailUrl = config.IMAGE_APIHOST + value.thumbnailUrl
						}
						adList.push(value)
					} else if (value.type == 2) {
						noList.push(value)
					}
				})
				this.adList = adList;
				this.noList = noList;
			},

			showPhoto(...url) {
				console.warn('showPhoto', url)
				wx.previewImage({
					current: '', // 当前显示图片的http链接
					urls: url // 需要预览的图片http链接列表
				})
			},
			goMedia(url) {
				wx.navigateTo({
					url: '/pagesA/index/adPage?url=' + url,
				})
			},

			//===========访客模块=============
			choose(e) {
				var index = 1
				console.warn('choose=>', e)
				var value = e.detail.value;
				// console.log('value',value)
				var key = e.currentTarget.id;
				this.formData[key] = value
				switch (key) {
					case 'date':
						var value = this.checkTime(value)
						if (value) { //不为空才赋值
							this.date = value
							var dateDif = this.checkTimeDif(this.date, this.visitEndDate)
							if (dateDif > 0) { //开始时间>结束时间,更新结束时间
								this.visitEndDate = value
							}
						}
						break;
					case 'visitEndDate':
						var value = this.checkTime(value)
						if (value) { //不为空才赋值
							this.visitEndDate = value
							var dateDif = this.checkTimeDif(this.date, this.visitEndDate)
							if (dateDif > 0) { //开始时间>结束时间,更新开始时间
								this.date = value
							}
						}
						break;
					case 'time':
						this.time = value
						break;
					case 'period':
						console.log('同行人数', this.period[value].name)
						this.periodIndex = value;
						break;
					case 'comeTime':
						console.log('通行次数', this.comeTime[value].name)
						this.comeTimeIndex = value;
						break;
					default:
						break;
				}

			},
			//判断时间：日期选择小于今天，提示用户选择有效的来访日期
			checkTime(value) {
				value = value.replace(/-/g, "/");
				var selectTime = new Date(value).getTime()
				var nowTime = new Date().getTime()
				var diffTime = selectTime - nowTime
				// console.warn('diffTime',diffTime)
				//选中日期-当前日期<1天，说明选择了过期时间
				if (diffTime < -24 * 60 * 60 * 1000) {
					wx.showToast({
						title: "请选择有效的来访日期",
						icon: 'none'
					});
				} else {
					return value
				}
			},
			//判断选择的开始时间是否大于结束时间
			checkTimeDif(value1, value2) {
				var selectTime = new Date(value1).getTime()
				var nowTime = new Date(value2).getTime()
				var diffTime = selectTime - nowTime
				// console.warn('diffTime',diffTime)
				return diffTime > 0 ? true : false
			},

			//来访目的
			comeListCli(id) {
				this.comeIndex = id
			},

			//获取该住户的门禁列表
			async gateList() {
				var url = '/UserServer/mini/gate/gateList'
				var params = {
					roomId: this.room.roomId
				}
				var options = {
					url,
					params
				}
				var param = await util.requestPro(options);
				this.doorList = param;
			},

			//获取当前住户的所有门禁列表,status=0离线设备,status=1在线设备
			async getAllGatePostList(status = 0) {
				var url = '/UserServer/mini/gate/getAllGatePostList'
				var params = {
					status
				}
				var options = {
					url,
					params
				}
				var param = await util.requestPro(options);
				this.doorListOffline = param;
			},

			//访客目的列表
			async purposeAll() {
				var url = '/UserServer/system/purpose/all'
				var params = {}
				var options = {
					url,
					params
				}
				var param = await util.requestPro(options);
				param = param.data
				param.map((item, index) => {
					item['comeUrl'] = config.images + '/comeUrl' + index + '.png'
					return item
				})
				this.comeList = param
			},


			commitTamp() {
				wx.showLoading({
					title: '',
					mask: true,
					duration: 1000
				}); //接口返回有延时，展示进度条过渡
				util.tottleOne(() => {
					console.warn('tottleOne')
					this.submit()
				})
				// this.submit()
			},

			async submit() {
				var status = this.validation() || 0;
				if (status) {
					var url = '/UserServer/owner/qrCode/invitation'
					var params = {
						"visitPurposeId": this.comeList[this.comeIndex].visitPurposeId,
						"personNumber": this.period[this.periodIndex].id,
						"roomId": this.room.roomId,
						"visitDate": this.date,
						"visitEndDate": this.visitEndDate,
						"limitPassNumber": this.comeTime[this.comeTimeIndex].id,
						"visitorName": this.visitorName
					};
					if (this.plateNum) {
						params['visitorPlate'] = this.plateNum;
					}
					// var params={"visitPurposeId":2,"personNumber":2,"roomId":6,"visitDate":"2021-12-31 12:00:00","limitPassNumber":1,"visitorName":"agen"}
					var options = {
						url,
						params,
						method: "PUT",
					}
					var param = await util.requestPro(options);
					console.warn('ownerRoomList=', param)
					param = {
						...params,
						...param
					}; //合并表单数据和接口返回密码数据
					console.warn('param', param)
					// return
					// wx.showToast({
					//   title: '生成成功',
					//   icon: 'none'
					// })
					this.onReset();
					// var json=JSON.stringify(param);
					var json = encodeURIComponent(JSON.stringify(param)); //函数可把字符串作为 URI 组件进行编码
					wx.navigateTo({
						url: '/pagesA/index/comeCode?json=' + json,
					})
				}
			},

			//重置提交参数
			onReset() {
				this.comeIndex = -1;
				this.visitorName = '';
				this.periodIndex = 0;
				this.comeTimeIndex = 0;
				this.date = '';
				this.visitEndDate = '';
				this.plateNum = '';
				this.$refs.plate.init(); //车牌键盘号码恢复初始化
			},
			validation() {
				if (this.comeIndex == -1) {
					wx.showToast({
						title: "请选择来访目的",
						icon: 'none'
					});
					return false;
				}
				if (this.visitorName == "") {
					wx.showToast({
						title: "请输入访客姓名",
						icon: 'none'
					});
					return false;
				}
				if (this.date == "") {
					wx.showToast({
						title: "请选择开始日期",
						icon: 'none'
					});
					return false;
				}
				if (this.visitEndDate == "") {
					wx.showToast({
						title: "请选择结束日期",
						icon: 'none'
					});
					return false;
				}
				if (this.plateNum != "") {
					var tel = this.plateNum;
					if (tel.length < 7) {
						wx.showToast({
							title: "请输入正确格式的车牌号",
							icon: 'none'
						});
						return false;
					}
				}
				return true;
			},

			/**
			 * @desc 显示车牌选择器
			 */
			carInputClick() {
				setTimeout(() => {
					console.warn('this.$refs', this.$refs, this.$refs.plate)
					this.$refs.plate.show();
				}, 200)
			},
			//关闭车牌键盘
			carClose() {
				if (this.$refs.plate) {
					this.$refs.plate.close();
				}
			},
			/**
			 * @desc 车牌选择关闭和打开
			 */
			showOrHide(falg) {
				this.isCursor = falg;
				console.warn('falg=', falg)
				if (falg) {
					this.scrollToCar();
				} else {
					wx.pageScrollTo({
						scrollTop: 0
					})
				}
			},
			//滚动屏幕显示车牌区域
			scrollToCar() {
				var query = wx.createSelectorQuery()
				//获取顶部的距离
				query.select('#comeTimeBol').boundingClientRect()
				query.selectViewport().scrollOffset()
				query.exec(function(res) {
					var top = res[0].top // #the-id节点的上边界坐标
					wx.pageScrollTo({
						scrollTop: top
					})
				})
			},

			//离开当前页面恢复屏幕亮度
			recoverLight() {
				var screenBri = wx.getStorageSync('screenBri');
				if (screenBri>0.3) {
					wx.setScreenBrightness({
						value: screenBri
					})
				}else {
					wx.setScreenBrightness({
						value: 0.31
					})
				}
			},

			//============远程开门模块============
			//选择门禁
			doorListCli(id) {
				this.doorIndex = id
			},
			openDoor() {
				if (this.doorIndex == -1) {
					wx.showToast({
						title: '请选择门禁',
						icon: 'none'
					})
					return
				}
				util.tottleOne(() => {
					console.warn('tottleOne')
					wx.showLoading({
						title: '开门中...',
						mask: true,
						duration: 1200
					})
					this.remoteControl()
				}, 1500)
				// this.remoteControl()
			},
			//远程开门
			async remoteControl() {
				var equipmentId = this.doorList[this.doorIndex].equipmentId || 11;
				var params = {
					equipmentId: equipmentId
				}
				var paramsUrl = util.stringifyQs(params)
				var url = '/UserServer/mini/gate/remoteControl?' + paramsUrl
				var options = {
					url,
					params: {},
					method: "POST"
				}
				//开门指令接口，没有成功回调
				await util.requestPro(options);
			},

			//切换门禁列表-0离线列表-1在线列表
			selectPer(index) {
				this.perIndex = index;
				var value = this.perList[index].value;
				this.getAllGatePostList(value)
			},

			//对话框
			onShowModal() {
				var self = this;
				wx.showModal({
					title: '消息订阅提示',
					content: '若取消将无法接收门禁终端PAD发起的远程呼叫请求，建议订阅。',
					cancelColor: "#999999",
					confirmColor: "#1086FF",
					confirmText: '订阅',
					cancelText: '取消',
					success(res) {
						if (res.confirm) {} else if (res.cancel) {}
					}
				})
			},

		},

		watch: {
			isHide(newVal) {
				var pages = getCurrentPages()
				var page = pages[pages.length - 1].route
				console.warn('isHide', newVal, pages, page, pages.length)
				if (newVal && 'pages/index/index' == page) {
					this.isAppHide = true
					console.warn('小程序最小化')
				}
			}
		},

	}
</script>

<style lang="scss" scoped>
	.pageContent {
		min-height: 100vh;
		padding: 108rpx 0rpx 0rpx 0rpx;
		background: #F3F6F9;
	}

	.code {
		padding: 0rpx 30rpx 0rpx 30rpx;
	}

	.pageContentGre {
		background: #F3F6F9;
	}

	.tabList {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 108rpx;
		background: #FFFFFF;
		padding: 30rpx 0rpx 30rpx 30rpx;
		z-index: 999;
		/* border 1px solid #999 */
	}

	.tabItem {
		display: inline-block;
		font-size: 32rpx;
		color: #333333;
		padding: 0rpx 16rpx 0rpx 16rpx;
		/* border 1px solid #666 */
	}

	.tabItem:nth-child(n+2) {
		margin-left: 30rpx;
	}

	.tabSelect {
		font-size: 34rpx;
		font-weight: bold;
	}

	.loginM {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 250rpx 0rpx 0rpx 0rpx;
	}

	.loginMIco {
		width: 240rpx;
		height: 270rpx;
	}

	.loginMBt {
		width: 70%;
	}

	.codeMain {
		display: flex;
		flex-direction: column;
		align-items: center;
		box-shadow: 4px 4px 22px 2px rgba(212, 212, 212, 0.39);
		width: 686rpx;
		border-radius: 10rpx;
		padding: 40rpx 40rpx 60rpx 40rpx;
		margin-top: 20rpx;
		background: #FFFFFF;


	}

	.codeTime {
		color: #333333;
		font-size: 56rpx;
		padding: 0rpx;
		font-weight: bold;
		white-space: nowrap;
	}

	.codeRefMa {
		font-size: 32rpx;
		color: #666666;
		margin: 0rpx 0rpx 10rpx 0rpx;
	}

	.codeRef {
		color: #1086FF;
		margin-left: 12rpx;
	}

	.codeTip {
		color: #666666;
	}

	.codeSecret {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 36rpx;
		font-weight: 600;
		color: #333333;
	}

	.codeSecList {
		display: flex;
		width: 100%;
		justify-content: space-between;
		margin: 30rpx 0rpx 30rpx 0rpx;
		/* border 1rpx solid aqua */
	}

	.codeSecItem {
		position: relative;
		height: 110rpx;
		width: 110rpx;
		line-height: 110rpx;
		color: #333333;
		font-size: 50rpx;
		text-align: center;
		z-index: 0;
	}

	.codeSecImg {
		position: absolute;
		height: 110rpx;
		width: 110rpx;
		left: 0;
		z-index: -1;
	}

	.codeSecTip {
		color: #587D93;
		font-size: 30rpx;
	}

	.codeSecTex {
		font-weight: 600;
		color: #FF6E5D;
		margin: 0rpx 0rpx 0rpx 0rpx;
	}

	.codeSecCha {
		color: #1086FF;
		margin: 20rpx 0rpx 0rpx 0rpx;
	}

	.codeSecChaImg {
		height: 26rpx;
		width: 26rpx;
		vertical-align: middle;
		margin: 0rpx 10rpx 0rpx 0rpx;
	}

	.imageTestMa {
		height: 600rpx;
		width: 500rpx;
		margin: 0rpx 0rpx 0rpx 0rpx;
		/* border 1px solid cadetblue */
	}

	.imageTest {
		position: absolute;
		height: 480rpx;
		width: 480rpx;
		margin: 0rpx 0rpx 0rpx 0rpx;
		top: 258rpx;
		left: 50%;
		margin-left: -240rpx;
		/* border 1px solid #bbb */
	}

	.imageTestBack {
		position: absolute;
		height: 100%;
		width: 100%;
		/* border 1px solid #ddd */
	}

	.imageTestLod {
		position: absolute;
		height: 100%;
		width: 100%;
		background-color: #000000;
		opacity: 0.6;
		text-align: center;
		/* border 1px solid #ddd */
	}

	.imageTestIc {
		width: 70rpx;
		height: 62rpx;
		padding-top: 20rpx;
	}

	.imageTestRe {
		position: absolute;
		font-size: 32rpx;
		color: #fff;
		padding-top: 180rpx;
	}

	.imageTestNo {
		position: absolute;
		font-size: 32rpx;
		color: #ccc;
		padding-top: 320rpx;
	}

	.codeMes {
		display: flex;
		align-items: center;
		width: 686rpx;
		height: 60rpx;
		background: #F2F8FF;
		box-shadow: 4px 4px 22px 4px #F3F3F3, 0px 1px 0px 0px #B8DCFF;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #577C93;
		padding: 0rpx 0rpx 0rpx 10rpx;
		margin-top: 20rpx;
	}

	.codeMesIc {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.codeMesAd {
		display: flex;
		width: 686rpx;
		height: 180rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
		/* background: #B8DCFF; */
	}

	.codeMesNo {
		width: 100%;
		height: 100%;
		padding: 26rpx 0rpx 0rpx 0rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		/* border 1px solid blue */
	}

	.codeMesSw {
		width: 100%;
		height: 180rpx;
		/* background #0AC160 */
	}

	.codeMesSwIm {
		width: 100%;
		height: 180rpx;
		/* border 1px solid coral */
	}

	.come {
		padding: 20rpx 30rpx 200rpx 30rpx;
	}

	.comeCon {
		width: 100%;
		/* height: 833rpx; */
		background: #FFFFFF;
		box-shadow: 4px 4px 22px 2px rgba(212, 212, 212, 0.39);
		border-radius: 10rpx;
		padding: 20rpx 20rpx 60rpx 20rpx;
		margin: 0rpx 0rpx 20rpx 0rpx;
	}

	.comeReg {
		background: #FFFFFF;
		line-height: 40rpx;
		font-weight: bold;
		padding: 0rpx 0rpx 20rpx 0rpx;
	}

	.comeCon>.comeTime {
		display: flex;
		flex-direction: row;
		color: #333333;
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 0.3px solid #DEDEDE;
	}

	.comeTyList {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		/* outline 1px solid #f00 */
	}

	.comeType {
		display: inline-block;
		width: 98rpx;
		text-align: center;
		margin: 0rpx 0rpx 40rpx 0rpx;
		border-radius: 10rpx;
		margin-right: 74rpx;
	}

	.comeType:nth-child(4n) {
		margin-right: 0rpx;
		/* outline 1px solid pink */
	}

	.comeTypeIcon {
		width: 90rpx;
		height: 90rpx;
		/* background: #1086FF; */
		margin: 0rpx 0rpx 10rpx 0rpx;
	}

	.comeTypeMsg {
		font-size: 26rpx;
		color: #333333;
		white-space: nowrap;
	}

	.comeTypeSel {
		color: #00A2FF;
		font-weight: bold;
	}

	.memberItSt {
		color: #FF6E5D;
	}

	.memberItSt.empty {
		color: #FFFFFF;
	}

	.comeTimeBol {
		font-weight: bold;
	}

	.comeRight {
		display: flex;
		align-items: center;
		padding: 0rpx 10rpx 0rpx 0rpx;
		margin-left: auto;
		text-align: right;
		/* border 1rpx solid blue */
	}

	.memberItIn {
		width: 422rpx;
	}

	.comeRightCarNO {
		display: flex;
		align-items: center;
		padding: 0rpx 10rpx 0rpx 0rpx;
		margin-left: auto;
		/* border 1rpx solid blue */
	}

	.rightCarNO {}


	.search-car-input {
		position: relative;
		margin-left: auto;
		width: 360rpx;
		background: #FFFFFF;
		// border: 1rpx solid fuchsia;

		.car-input {
			float: right;
			display: flex;
			// border: 1rpx solid blue;

			.energy {
				float: left;
				/* width: 48rpx; */
				height: 34rpx;
				line-height: 32rpx;
				font-size: 26rpx;
				vertical-align: middle;
				align-self: center;
				margin-right: 18rpx;
				padding: 0rpx 10rpx 0rpx 10rpx;
				background: #0AC160;
				color: #fff;
				border: 6rpx;
				white-space: nowrap;
			}

			.car-input-text {
				float: left;
				color: #999;
				// width: 320rpx;
				white-space: nowrap;
				padding-right: 6rpx;
				// text-align: right;
			}

			.car-input-text.active {
				color: #333;
			}

			.cursor {
				position: relative;
			}

			.cursor:after {
				position: absolute;
				content: '';
				display: inline-block;
				width: 2rpx;
				height: 28rpx;
				top: 50%;
				transform: translateY(-50%);
				animation: blink 1.2s infinite steps(1, start);
			}
		}
	}

	@-webkit-keyframes blink {

		0%,
		100% {
			background-color: #000;
		}

		50% {
			background-color: transparent;
		}
	}

	.comePic {
		margin-left: 40rpx;
		/* border 1rpx solid coral */
	}

	.comePicInput {
		display: inline-block;
		vertical-align: top;
		width: 60rpx;
		text-align: center;
		margin: 0rpx 10rpx 0rpx 10rpx;
		/* border 1rpx solid aqua */
	}

	.comePicVie {
		display: inline-block;
		/* width: 28rpx; */
		height: 24rpx;
		margin-right: 10rpx;
	}

	.comeDefault {
		color: #999;
	}

	.comePicDatIm {
		width: 28rpx;
		height: 24rpx;
		/* background: #1086FF; */
		margin: 34rpx 0rpx 0rpx 0rpx;
	}

	.comePicMain {
		position: relative;
		/* border 1rpx solid darkcyan */
	}

	.comePicDel {
		position: relative;
		display: inline-block;
		vertical-align: top;
		margin: 30rpx 0rpx 0rpx 10rpx;
		height: 20rpx;
		width: 20rpx;
		transform: rotate(135deg);
		border-top: 2rpx solid #1086FF;
		border-right: 2rpx solid #1086FF;
	}

	.comePicDel.comeCarNo {
		margin: 30rpx 16rpx 0rpx 6rpx;
	}

	.btOne {
		margin: 90rpx 20rpx 24rpx 20rpx;
	}

	.btOne.btDefalt {
		opacity: 0.6;
	}

	.comeMes {
		display: flex;
		align-items: center;
		width: 100%;
		/* height: 60rpx; */
		background: #F2F8FF;
		box-shadow: 4px 4px 22px 4px #F3F3F3, 0px 1px 0px 0px #B8DCFF;
		border-radius: 10rpx;
		font-size: 22rpx;
		color: #577C93;
		padding: 10rpx 0rpx 10rpx 10rpx;
		margin-top: 0rpx;
	}

	.remote {
		padding: 40rpx 30rpx 20rpx 30rpx;

		.remoteMain {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			box-shadow: 4px 4px 22px 2px rgba(212, 212, 212, 0.39);
			width: 100%;
			height: 120rpx;
			border-radius: 20rpx;
			padding: 0rpx 20rpx 0rpx 116rpx;
			background: #FFFFFF;
			margin-bottom: 20rpx;
			z-index: 0;
			// border: 1px solid #666;

			.remoteBac {
				position: absolute;
				width: 100%;
				height: 120rpx;
				top: 0rpx;
				left: 0rpx;
				z-index: -1;
			}

			.remoteIco {
				position: absolute;
				top: 50%;
				left: 40rpx;
				margin-top: -25rpx;
				width: 56rpx;
				height: 46rpx;
				background: #84D7FF;
				/* border 1px solid #84D7FF */
			}

			.remoteSel {
				position: absolute;
				bottom: 0rpx;
				right: 0rpx;
				width: 56rpx;
				height: 36rpx;
				/* border 1px solid #84D7FF */
			}
		}
	}

	.remotePerType {
		padding: 100rpx 30rpx 20rpx 30rpx;
	}

	.perTypeMain {
		position: fixed;
		top: 100rpx;
		width: 100%;
		padding: 0rpx 0rpx 0rpx 0rpx;
		height: 80rpx;
		background-color: #F3F6F9;
		/* border: 1rpx solid #f00; */
		z-index: 999;
	}

	.perType {
		display: inline-block;
		line-height: 45rpx;
		border-radius: 4rpx;
		text-align: center;
		color: #70B7FF;
		background: #F2F8FF;
		margin: 20rpx 0rpx 0rpx 50rpx;
		padding: 0rpx 10rpx 0rpx 10rpx;
		border: 1rpx solid #B8DCFF;
	}

	.perType.select {
		background: #70B7FF;
		color: #FFFFFF;
	}

	.remoteGate {
		font-size: 30rpx;
		color: #030303;
		line-height: 42rpx;
	}

	.remoteName {
		font-size: 26rpx;
		color: #92A7B3;
	}



	.movableArea {
		position: fixed;
		top: 100rpx;
		left: 0rpx;
		width: 750rpx;
		height: 90vh;
		background-color: red;
		z-index: -1;
	}

	.movableView {
		position: absolute;
		bottom: 100rpx;
		right: 10rpx;
		width: 110rpx;
		height: 110rpx;
		background: blue;
		border-radius: 50%;
	}

	.comePicImg {
		position: absolute;
		bottom: 100rpx;
		right: 10rpx;
		width: 28rpx;
		height: 24rpx;
		background: #1086FF;
		margin: 25rpx 0rpx 0rpx 0rpx;
	}

	.roomMov {
		position: fixed;
		width: 130rpx;
		height: 130rpx;
		right: 50rpx;
		bottom: 100rpx;
		line-height: 34rpx;
		font-size: 28rpx;
		/* background: #f00; */
		z-index: 1000;
	}

	.roomMovTe {
		position: absolute;
		width: 130rpx;
		height: 130rpx;
		top: 50%;
		left: 50%;
		margin-left: -65rpx;
		margin-top: -65rpx;
		z-index: -1;
	}

	.roomMovMsg {
		color: #fff;
		text-align: center;
		line-height: 130rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.appEmp {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;
		background: #fff;
		margin: 0rpx 0rpx 0rpx 0rpx;
		padding: 110rpx 0rpx 0rpx 0rpx;
	}

	.appEmpIcon {
		width: 670rpx;
		height: 730rpx;
	}

	.appEmpMsg {
		color: #A8AFB6;
		font-size: 36rpx;
		margin: -183rpx 0rpx 0rpx 0rpx;
	}
</style>
